import React, { useEffect, useRef, useState } from 'react';
import {
  Form,
  Input,
  Modal,
  Select,
  DatePicker,
  Row,
  Col,
  InputNumber,
} from 'antd';
import { useRequest, useUpdateEffect } from '@umijs/hooks';
import { apiFileGetList, deviceMaster } from '@/services/otherServices';
import { adminCompanyType } from '@/utils/constant';

const FormItem = Form.Item;
const Detail = (props: any) => {
  const {
    visible,
    onCancel,
    onOk,
    getForm,
    loading,
    afterClose,
    editId,
  } = props;
  const [form] = Form.useForm();
  const [data, setData] = useState([]);
  const [searchValue, setSearchValue] = useState('');
  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 4 },
      md: { span: 4 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 18 },
      md: { span: 18 },
    },
  };
  const { loading: ListLoading, run } = useRequest(deviceMaster, {
    manual: true,
    throttleInterval: 500,
    onSuccess: (res, params) => {
      setData(res.data);
    },
  });

  useEffect(() => {
    getForm(form);
    run({
      pageNo: 1,
      pageSize: 10,
    });
  }, []);

  useUpdateEffect(() => {
    run({
      deviceNo: searchValue,
      pageNo: 1,
      pageSize: 10,
    });
  }, [searchValue]);

  return (
    <Modal
      title={editId !== undefined ? '编辑' : '新增'}
      afterClose={afterClose}
      visible={visible}
      onCancel={onCancel}
      onOk={onOk}
      width={1024}
      destroyOnClose={true}
      confirmLoading={loading}
    >
      <Form hideRequiredMark style={{ marginTop: 8 }} form={form} name="basic">
        <Row gutter={12}>
          <Col span={12}>
            <FormItem
              rules={[{ required: true, message: '请选择公司' }]}
              {...formItemLayout}
              label={'公司名'}
              name="company"
            >
              <Select>
                {adminCompanyType.map(item => (
                  <Select.Option key={item.value} value={item.value}>
                    {item.label}
                  </Select.Option>
                ))}
              </Select>
            </FormItem>
          </Col>
          <Col span={12}>
            <Form.Item
              rules={[{ required: true, message: '请选择设备编号' }]}
              {...formItemLayout}
              label={'设备编号'}
              name="deviceId"
            >
              <Select
                showSearch
                onSearch={value => {
                  setSearchValue(value);
                }}
                filterOption={false}
                placeholder="请选择设备编号"
              >
                {data &&
                  data.map((item: any) => (
                    <Select.Option key={item.id} value={item.deviceNo}>
                      {item.deviceNo}
                    </Select.Option>
                  ))}
              </Select>
            </Form.Item>
          </Col>
          <Col span={12}>
            <FormItem
              rules={[{ required: true, message: '请输入订单号' }]}
              {...formItemLayout}
              label={'订单号'}
              name="orderNo"
            >
              <Input />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              {...formItemLayout}
              rules={[{ required: true, message: '请输入产线名' }]}
              label={'产线名'}
              name="productLine"
            >
              <Input />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              {...formItemLayout}
              rules={[{ required: true, message: '请输入材料' }]}
              label={'材料'}
              name="material"
            >
              <Input />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              {...formItemLayout}
              label={'规格'}
              name="spec"
              rules={[
                ({ getFieldValue }) => ({
                  validator(rule, value) {
                    if (value) {
                      let newValue = value.split('X');
                      let tag = false;
                      let number = 0;
                      newValue.forEach((n: any) => {
                        if (n === '') {
                          number += 1;
                        }
                        if (isNaN(n * 1)) {
                          tag = true;
                        }
                      });
                      if (tag || number !== 0) {
                        return Promise.reject('请输入正确规格,例如 500X300');
                      }
                      return Promise.resolve();
                    } else {
                      return Promise.reject('请输入规格');
                    }
                  },
                }),
              ]}
            >
              <Input />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              rules={[{ required: true, message: '请输入卷号' }]}
              {...formItemLayout}
              label={'卷号'}
              name="coilNo"
            >
              <InputNumber style={{ width: '100%' }} />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              rules={[{ required: true, message: '请输入重量' }]}
              {...formItemLayout}
              label={'重量'}
              name="weight"
            >
              <Input />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              rules={[{ required: true, message: '请输入批次号' }]}
              {...formItemLayout}
              label={'批次号'}
              name="lotNo"
            >
              <Input />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              rules={[{ required: true, message: '请选择生成时间' }]}
              {...formItemLayout}
              label={'生成时间'}
              name="generatedTime"
            >
              <DatePicker
                disabled={editId !== undefined}
                showTime
                placeholder={'请选择生成时间'}
                style={{ width: '100%' }}
              />
            </FormItem>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
};
export default Detail;
